{% extends "base.html" %}

{% block mainbody %}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="/static/js/echarts.js"></script>
{#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>#}
</head>
<title>实体</title>
<div class="container">
    <div class="row">
    <!--head start-->
    <div class="col-md-12">
        <h3 class="page-header"><i class="fa fa-share-alt" aria-hidden="true"></i> 故障现象查询 </h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="\">Home</a></li>
                <li><i class="icon_genius" aria-hidden="true"></i>查询和故障现象相关的信息</li>
            </ol>
    </div>
    <div class = "col-md-12">
        <div class="panel panel-default ">
            <header class = "panel-heading">
                Query conditions：
            </header>
            <div class = "panel-body">
                <!--搜索框-->
                <form method = "get" id = 'searchEntityForm'>
                    <div >
                        <div class="input-group">
                            <input type="text" id = "user_text" name = "user_text" class="form-control" placeholder="输入故障现象名称" aria-describedby="basic-addon1">
                            <span class="btn btn-primary  btn-block input-group-addon" type="button" id="relationSearchButton"  onclick="document.getElementById('searchEntityForm').submit();">Query</span>
                         </div>
                    </div>
                </form>
            </div>
        </div>

        
    </div>
    <p>
        <div class = "col-md-12">
            {% if ctx %}
                <div class="panel panel-default">
                    <header class ="panel-heading">
                        <div class = "panel-body">
                            <h2>数据库中暂未添加故障现象</h2>
                        </div>
                    </header>
                </div>
            {% endif %}
        </div>
    </p>
<!--relation start-->
<!--图表示-->
{% if entityRelation %}
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class = "col-md-12">
        <div class="panel panel-default ">
            <header class="panel-heading">
                Query results :
            </header>
            <div class = "panel-body ">
                <div id="graph" style="width: 90%;height:600px;"></div>
            </div>
        </div>
    </div>
{% endif %}
<!--表格表示，如果传过来的是有意义的值，则创建并动态添加-->
{% if entityRelation %}
<div class = "col-md-12">
    <div class="panel panel-default">
    <header class="panel-heading">
        Triple representation :
    </header>
        <div class = "panel-body">
            <table class = "table" data-paging = "true" data-sorting="true"></table>
        </div>
    </div>
</div>
{% endif %}
</div>
</div>

{% if entityRelation %}
<script src="/static/js/jquery.min.js"></script>

{% endif %}

{% endblock %}
